<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <div v-if="status==='BROWSING'||status==='DISTRIBUTING'">
      <el-row class="row-bg" type="flex" align="middle">
        <p style="padding: 0;margin: 0"><b>工作台管理</b> 设计工作台布局，分配角色，为首页提供布局方案。
        </p>
      </el-row>
      <el-card class="dash-board-design">
        <ft-pagination :current-page="1" :page-size="8" :total="total" @pageChange="loadDashboards">
          <div slot="toolbar" class="acc-arch__toolbar">
            <el-button type="primary" icon="el-icon-refresh" size="small"
                       @click="loadDashboards(1,pageSize)">刷新
            </el-button>
            <el-button type="primary" size="small" icon="joys-icon-new"
                       @click="addDashboard">新建
            </el-button>
            <el-input style="margin-left: 50px;width: 200px"
                      placeholder="请输入工作台名称" v-model="filter"
                      @change="loadDashboards(1,pageSize)"></el-input>
          </div>
          <el-table :data="dashboards" row-key="dashboardId" :expand-row-keys="expandRowKeys">
            <el-table-column label="工作台名称" prop="dashboardName">
              <template slot-scope="scope">
                <el-button @click="showDetail(scope.$index,scope.row)" type="text">
                  {{scope.row.dashboardName}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="creatorName"></el-table-column>
            <el-table-column label="创建时间" prop="creationTs"></el-table-column>
            <el-table-column label="最后修改人" prop="updatorName"></el-table-column>
            <el-table-column label="最后修改时间" prop="updationTs"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editDashboard(scope.$index)">修改</el-button>
                <el-popover title="确认" placement="top" width="200" trigger="click" v-model="scope.row.delVisible">
                  <p>确认要删除该工作台吗？删除后无法恢复！</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="small" type="text" @click="scope.row.delVisible=false">取消</el-button>
                    <el-button type="primary" size="small" @click="deleteDashboard(scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference">
                <el-button style="margin-left: .10rem;color: rgb(185, 100, 99);" type="text" size="small">删除</el-button>
              </span>
                </el-popover>
                <el-button style="margin-left: .10rem" type="text" size="small"
                           @click="editDashboardDist(scope.$index)">分配
                </el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" width="1">
              <template slot-scope="scope">
                <el-card>
                  <div slot="header"><span style="margin-left: .10rem">角色</span></div>
                  <el-form label-width="30">
                    <el-form-item>
                      <el-checkbox-group v-model="grantedRoles">
                        <el-checkbox style="width: 8.00rem;margin-left: .10rem" v-for="role in allRoles"
                                     :key="role.roleId"
                                     :label="role.roleId" :value="role.roleId">{{role.roleName}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-form>
                  <div style="display: block; padding: .15rem 0 0 0;text-align: right">
                    <el-button type="primary" size="small" @click="distDashboard(scope.$index)">保存</el-button>
                    <el-button size="small" @click="cancelDashboardDist(scope.$index)">取消</el-button>
                  </div>
                </el-card>
              </template>
            </el-table-column>
          </el-table>
        </ft-pagination>
      </el-card>
    </div>
    <div class="styleBox">
      <div class="titlebox"></div>
      <div v-if="status==='EDITING'||status==='DETAIL'" class="editing-dashboard"
           :class="{'editingStyle':status==='DETAIL'}">
        <el-row class="editing-dashboard-el-row">
          <ft-return-btn text="返回工作台列表"style="margin-left: 24px;font-size: 16px" @click="cancel"></ft-return-btn>
        </el-row>
        <span v-if="status==='DETAIL'" class="dashboard-name-style">{{dashboard.dashboardName}}</span>
        <div v-if="status==='EDITING'" class="dashboard-tool">
          <div v-if="status==='EDITING'" class="dashboard-tool-name">
            <!--<span style="color:#f56c6c;">*</span>-->
            <span class="dashboard-tool-span">工作台名称</span>
            <el-input :disabled="status==='DETAIL'" v-model="dashboard.dashboardName"
                      class="dashboard-tool-input"></el-input>
          </div>
          <div class="dashboard-tool-mode">
            <span class="dashboard-tool-span">自定义工作模块 </span>
            <dashboard-widget-select v-model="applets" class="dashboard-select"
                                     @returnApplet="changeWidget"></dashboard-widget-select>
            <el-button v-if="status==='EDITING'" type="primary" size="small" @click="saveDashboard"
                       class="editing-dashboard-save">保存
            </el-button>
          </div>

        </div>
      </div>
      <dashboard :class="{'editingDashboardStyle':status==='DETAIL'}" v-if="status==='EDITING'||status==='DETAIL'"
                 :editable="status==='EDITING'" :widgets="widgets"></dashboard>
    </div>

  </div>
</template>

<script>
  import Dashboard from './Dashboard'
  import DashboardWidgetSelect from "./DashboardWidgetSelect";

  export default {
    components: {DashboardWidgetSelect, Dashboard},
    name: "DashboardDesign",
    mounted() {
      this.loadAllRoles()
      this.loadDashboards(1, this.pageSize)
    },
    data() {
      return {
        status: 'BROWSING',
        total: 0,
        rowIndex: 0,
        currentPage: 1,
        pageSize: 8,
        dashboards: [],
        dashboard: null,
        widgets: [],
        filter: '',
        expandRowKeys: [],
        grantedRoles: [],
        allRoles: [],
        applets: []
      }
    },
    methods: {
      loadDashboards(pageIndex, pageSize) {
        this.dashboards = []
        this.currentPage = pageIndex
        this.pageSize = pageSize
        this.$http.post('/joys-rest/joys-admin/dashboards/shared', null, {
          params: {
            filter: this.filter,
            pageIndex: pageIndex,
            pageSize: pageSize
          }
        }).then(resp => {
          this.dashboards = resp.data.rows
          this.total = resp.data.total
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      loadAllRoles() {
        this.$http.get('/joys-rest/joys-master-data/roles/all').then(resp => {
          this.allRoles = resp.data
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      loadGrantedRoles(dashboardId) {
        if (dashboardId) {
          this.$http.get('/joys-rest/joys-admin/dashboards/' + dashboardId + '/grantedRoles').then(resp => {
            this.grantedRoles = resp.data
          }).catch(err => {
            this.$message.error(err.response.data.message)
          })
        }
      },
      showDetail(rowIndex, value) {
        this.rowIndex = rowIndex
        this.dashboard = value
        this.$http.get('/joys-rest/joys-admin/widgets/', {params: {dashboard: this.dashboard.dashboardId}}).then(resp => {
          this.widgets = resp.data
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
        this.status = 'DETAIL'
      },
      cancel() {
        this.widgets = []
        this.status = 'BROWSING'
      },
      addDashboard() {
        this.rowIndex = 0
        this.dashboard = {dashboardName: 'New Dashboard', dashboardType: "SHARED"}
        this.dashboards.unshift(this.dashboard)
        this.widgets = []
        this.status = 'EDITING'
      },
      editDashboard(rowIndex) {
        this.rowIndex = rowIndex
        this.dashboard = this.dashboards[rowIndex]
        this.$http.get('/joys-rest/joys-admin/widgets/', {params: {dashboard: this.dashboard.dashboardId}}).then(resp => {
          this.widgets = resp.data
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
        this.status = 'EDITING'
      },
      saveDashboard() {
        if (!this.dashboard.dashboardName) {
          this.$message.warning("工作台名称不能为空")
          return
        }
        if (!this.widgets.length) {
          this.$message.warning("请设计布局")
          return
        }
        this.$http.post('/joys-rest/joys-admin/dashboards/save', {
          dashboard: this.dashboard,
          widgets: this.widgets
        }).then(resp => {
          this.dashboard = resp.data.dashboard
          this.widgets = []
          this.dashboards.splice(this.rowIndex, 1, this.dashboard)
          this.status = 'BROWSING'
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      deleteDashboard(rowIndex) {
        const dashboard = this.dashboards[rowIndex]
        this.$http.delete('/joys-rest/joys-admin/dashboards/' + dashboard.dashboardId, {params: {dataVersion: dashboard.dataVersion}}).then(resp => {
          this.dashboards.splice(rowIndex, 1)
        }).catch(err => {
          this.$message.error(err.response.data.message)
          dashboard.delVisible = false
        })

      },
      editDashboardDist(rowIndex) {
        this.rowIndex = rowIndex
        this.dashboard = this.dashboards[rowIndex]
        this.expandRowKeys = [this.dashboard.dashboardId]
        this.status = 'DISTRIBUTING'
        this.loadGrantedRoles(this.dashboard.dashboardId)
      },
      cancelDashboardDist(rowIndex) {
        this.expandRowKeys = []
        this.status = 'BROWSING'
      },
      distDashboard(rowIndex) {
        this.expandRowKeys = []
        this.status = 'BROWSING'
        const dashboardId = this.dashboards[rowIndex].dashboardId
        this.$http.post('/joys-rest/joys-admin/dashboards/' + dashboardId + '/distToRoles', this.grantedRoles).then(resp => {
          this.$message.success('工作台分配成功')
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      returnList() {
        this.widgets = []
        this.status = 'BROWSING'
      },
      //应用选择器选择应用
      changeWidget(value) {
        if (value.add) {//增加部件
          let maxY = 0
          let maxI = 0
          for (let i in this.widgets) {
            const widget = this.widgets[i]
            if (widget.y >= maxY) {
              maxY = widget.y + widget.h
            }
            if (widget.i >= maxI) {
              maxI = widget.i + 1
            }
          }
          this.widgets.push({
            x: 0,
            y: maxY,
            w: 8,
            h: 3,
            i: maxI,
            appletId: value.appletId,
            routeUrl: value.routeUrl
          })
        } else {//删除部件
          for (let j in this.widgets) {
            const widget = this.widgets[j]
            if (widget.appletId === value.appletId) {
              this.widgets.splice(j, 1)
              break
            }
          }
        }

      },
    },
    watch: {
      widgets() {
        this.applets = []
        for (let j in this.widgets) {
          const widget = this.widgets[j]
          if (this.applets.indexOf(widget.appletId) < 0) {
            this.applets.push(widget.appletId)
          }
        }
      }
    }
  }
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0px;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;

  }

  .dash-board-design {
    margin-top: -20px;
  }

  .editing-dashboard {
    position: fixed;
    width: calc(100% - 46.5px);
    height: 128px;
    top: 0px;
    background-color: #FFFFFF;
    padding-bottom: 24px;
    z-index: 10000;
    box-shadow: 0px 5px 1px #f4f8f9;
  }

  .styleBox {
    height: 100%;
  }

  .styleBox .titlebox {
    height: 138px;
  }

  .editing-dashboard-el-row {
    /*text-align: left;*/
    margin: 0 0 20px 0;
    padding-top: 16px
  }

  .dashboard-tool {
    height: 32px;
    line-height: 32px;
  }

  .dashboard-tool-name {
    margin-right: 30px;
    margin-left: 36px;
    display: inline-block;
    float: left
  }

  .dashboard-tool-span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #8C8C8C;
    letter-spacing: 0;
    text-align: right;
    margin-right: 8px;
    height: 32px;
    line-height: 32px;
  }

  .dashboard-tool-input {
    width: 156px;
  }

  .dashboard-tool-input >>> .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .dashboard-tool-mode {
    height: 32px;
    line-height: 32px;
    float: left;
  }

  .dashboard-select {
    display: inline-block;
  }

  .dashboard-return {
    margin-left: 24px;
    /*margin-right: 48px;*/
    /*height: 36px;*/
    font-size: 16px;
    padding: 0;
  }

  .editing-dashboard-save {
    margin-left: 0px;
    width: 56px;
    height: 28px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 2px;
    padding: 0;
  }

  .editing-dashboard >>> hr {
    background-color: #FFFFFF;
    opacity: 0.2;
    /*border: none;*/
    height: 1px;
    margin: 10px 0 0 0;
  }

  .editingStyle {
    margin-right: 10px;
  }

  .editingDashboardStyle {
    padding-top: 10px;
  }

  .dashboard-name-style {
    margin: 0 0 24px 24px;
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: #2A2D2E;
    line-height: 36px;
  }

</style>
